<template>
    <el-table
            highlight-current-row
            v-loading="loading"
            :data="tableBus.filter(data => !search || data.busNum.toLowerCase().includes(search.toLowerCase()) || data.bid==search)"
            stripe
            style="width: 100%">
        <el-table-column
                prop="bid"
                label="车辆编号"
                width="140">
        </el-table-column>
        <el-table-column
                prop="busNum"
                label="车牌号"
                width="150">
        </el-table-column>

        <el-table-column
                label="司机"
                width="130">
            <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                    <p>姓名: {{ scope.row.driver.ename }}</p>
                    <p>住址: {{ scope.row.driver.eaddress }}</p>
                    <p>电话: {{ scope.row.driver.ephone }}</p>
                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.driver.ename }}</el-tag>
                    </div>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column
                label="检票员"
                width="130">
            <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                    <p>姓名: {{ scope.row.collector.ename }}</p>
                    <p>住址: {{ scope.row.collector.eaddress }}</p>
                    <p>电话: {{ scope.row.collector.ephone }}</p>
                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.collector.ename }}</el-tag>
                    </div>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column
                prop="bmodel"
                label="车型">
        </el-table-column>
        <el-table-column
                prop="busLoad"
                label="承载人数"
               >
        </el-table-column>
        <el-table-column
                align="right">
            <template slot="header" slot-scope="scope">
                <el-input
                        v-model="search"
                        size="mini"
                        prefix-icon="el-icon-search"
                        placeholder="输入关键字搜索"/>
            </template>
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        type="info"
                        @click="dialog = true">新增</el-button>
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-popconfirm
                        confirmButtonText='好的'
                        cancelButtonText='不用了'
                        icon="el-icon-info"
                        iconColor="red"
                        title="确定删除该车辆信息吗？"
                        @onConfirm="handleDelete(scope.$index, scope.row)"
                >
                    <el-button
                            style="margin-left: 10px;"
                            slot="reference"
                            size="mini"
                            type="danger"
                            @click="">删除</el-button>
                </el-popconfirm>
            </template>
        </el-table-column>

        <!--新增车辆面板-->
        <el-drawer
                :append-to-body="true"
                :before-close="handleClose"
                :visible.sync="dialog"
                custom-class="demo-drawer"
                ref="drawer">
            <!-- :append-to-body="true" 解决全部黑屏，无法关闭抽屉的情况 -->

            <div class="demo-drawer__content" style="margin-top: -40px">
                <h3 style="text-align: center">录入车辆信息</h3>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm" size="medium">
                    <el-form-item label="车型" prop="model">
                        <el-select v-model="ruleForm.model" placeholder="请手动选择车型">
                            <!--改-->
                            <el-option label="宇通客车豪华版" value="宇通客车豪华版"></el-option>
                            <el-option label="宇通客车旅游版" value="宇通客车旅游版"></el-option>
                            <el-option label="奔驰迈巴赫" value="奔驰迈巴赫"></el-option>
                            <el-option label="宝马x5" value="宝马x5"></el-option>
                            <el-option label="大众CC" value="大众CC"></el-option>
                            <el-option label="五菱宏光" value="五菱宏光"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="载客人数" prop="load">
                        <el-input type="number" v-model.number="ruleForm.load" style="width:85px;"></el-input> 人
                    </el-form-item>
                    <el-form-item label="车牌号" prop="num2">
                        <el-input v-model="ruleForm.num2" style="width:210px;">
                            <el-select  v-model="ruleForm.num1" slot="prepend" placeholder="请选择" style="width: 90px">
                                <el-option v-for="pro in province"   :label="pro" :value="pro"></el-option>
                            </el-select>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="司机" prop="dName">
                        <!--<el-input v-model="ruleForm.dName" style="width:auto;"></el-input>-->
                        <el-select v-model="ruleForm.dName" filterable placeholder="司机" style="width: 100px;">
                            <el-option  v-for="item in emps"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="检票员" prop="cName">
                        <!--<el-input v-model="ruleForm.cName" style="width:auto;"></el-input>-->
                        <el-select v-model="ruleForm.cName" filterable placeholder="检票员" style="width: 100px;">
                            <el-option  v-for="item in emps"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="Submit" :loading="loading">{{ loading ? '提交中 ...' : '新增车辆' }}</el-button>
                        <el-button @click="cancelForm">取 消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-drawer>
        <EditBus
                :dataBus="dialogBus"
                :append-to-body="true">
        </EditBus>
    </el-table>
</template>

<script>
    import EditBus from '../components/EditBus.vue'
    export default {
        name: "BusList",
        inject:['reload'],
        components:{EditBus},
        data() {
            return {
                tableBus: [],
                province: ['京', '湘', '津', '鄂', '沪', '粤', '渝', '琼', '翼', '川', '晋', '贵', '辽', '云', '吉', '陕', '黑', '甘', '苏', '青', '浙', '皖', '藏', '闽', '蒙', '赣', '桂', '鲁', '宁', '豫', '新'],
                loading:false,
                search:'',
                dialog: false,
                emps: null,
                dialogBus:{},//修改面板的参数
                ruleForm: {
                    model: '',
                    load: '',
                    num1: '',
                    num2: '',
                    dName: '',
                    cName: '',
                },
                rules: {
                    model: [
                        { required: true, message: '请选择车型', trigger: 'change' }
                    ],
                    load: [
                        { required: true, message: '请输入载客人数',trigger: 'blur'},
                        { type: 'number', message: '载客人数必须为数字值', trigger: 'blur'},
                    ],
                    num1: [
                        { required: true, message: '请选择地区', trigger: 'change' }
                    ],
                    num2: [
                        { required: true, message: '请输入车牌号', trigger: 'blur' }
                    ],
                    dName: [
                        { required: true, message: '请输入司机姓名', trigger: 'blur' }
                    ],
                    cName: [
                        { required: true, message: '请输入检票员姓名', trigger: 'blur' }
                    ],
                },
                formLabelWidth: '80px',
                timer: null,
            }
        },
        mounted(){
            this.getData();
        },
        methods:{
            async getData(){
                await this.axios.get("/option/getAllOption").then(res=>{
                    //console.log(res.data.emps);
                    //this.origins=res.data.origins;
                    //this.destinations=res.data.destinations;
                    this.emps=res.data.emps;
                    //this.statuses=res.data.status;
                    //this.buses=res.data.buses;
                });
            },
            handleEdit(index, row) {
                this.$store.commit('setDialog',true);
                //alert(JSON.stringify(row));
                this.dialogBus=row;
            },
            handleDelete(index, row) {
                //删除
                let id=new URLSearchParams();
                id.append("id",row.bid);
                setTimeout(() => {
                    this.axios.post("/bus/delete",id)
                        .then(res=>{
                            if (res.data==""){
                                this.$message({
                                    message: "权限不足,请联系高级管理员",
                                    type: 'error'
                                });
                            }else{
                                this.$message({
                                    message: res.data,
                                    type: 'success'
                                });
                            }
                            /*this.$message({
                                message: res.data,
                                type: 'success'
                            });*/
                            //重新渲染（CSDN上的快速刷新页面）
                            this.reload();
                        });
                    this.loading = false;
                }, 600);
            },
            handleClose(done) {
                done();
                //点击抽屉以外，直接回到列表页面
                this.loading = false;
                this.dialog = false;
                clearTimeout(this.timer);
            },
            cancelForm() {
                //点击取消按钮
                this.loading = false;
                this.dialog = false;
                clearTimeout(this.timer);
            },
            Submit(done) {
                //点击提交按钮
                if (this.loading) {
                    return;
                }
                //验证表单
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        console.log('表单验证通过！');
                        this.$confirm('确定要提交表单吗？')
                            .then(_ => {
                                //提交表单
                                this.loading = true;
                                this.timer = setTimeout(() => {
                                    //封装车辆类
                                    let bus = new URLSearchParams();
                                    bus.append('bmodel', this.ruleForm.model);
                                    bus.append('bload', this.ruleForm.load);
                                    let num=(this.ruleForm.num1+this.ruleForm.num2);
                                    num=num.slice(0, 2) + "·" + num.slice(2);
                                    bus.append('bnum', num);
                                    bus.append('did', this.ruleForm.dName);
                                    bus.append('cid', this.ruleForm.cName);

                                    // 动画关闭需要一定的时间
                                    setTimeout(() => {
                                        this.axios.post("/bus/add",bus)
                                            .then(res=>{
                                                //重新渲染（CSDN上的快速刷新页面）
                                                //location.reload();
                                                this.$message({
                                                    message: '添加车辆成功',
                                                    type: 'success'
                                                });
                                                this.reload();
                                            });
                                        this.loading = false;
                                    }, 400);
                                });
                            })
                            .catch(_ => {
                                //不提交表单，回到列表页面
                                this.loading = false;
                                this.dialog = false;
                                clearTimeout(this.timer);
                            });
                    } else {
                        //表单验证失败
                        this.$message.error('请正确填写车辆信息');
                        //console.log('error submit!!');
                        return false;
                    }
                });

            },
        },
        created(){
                let _this=this;
                 _this.loading=true;
                this.axios.get("/bus/queryAll")
                    .then(res=>{
                        let buses=[];
                        for (let i = 0; i < res.data.length; i++) {
                            buses[i]={
                                bid: res.data[i].bid,
                                busNum: res.data[i].bnum,
                                bmodel: res.data[i].bmodel,
                                driver: res.data[i].driver,
                                collector: res.data[i].collector,
                                busLoad: res.data[i].bload+"人",
                            };
                        }
                        this.tableBus=buses;
                        //console.log(buses)
                        _this.loading=false;
                    })
         }
    }
</script>

<style scoped>

</style>
